<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局优化演示 - 固定资产管理系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/admin_minimal.css">
</head>
<body>
    <!-- 左侧导航栏 -->
    <div id="nav-sidebar">
        <div class="nav-sidebar">
            <div>
                <h2>资产管理</h2>
                <ul>
                    <li>
                        <a href="#asset">资产管理</a>
                        <a href="#asset-add" class="addlink" title="添加资产"></a>
                    </li>
                    <li>
                        <a href="#supplier" class="current">供应商管理</a>
                        <a href="#supplier-add" class="addlink" title="添加供应商"></a>
                    </li>
                    <li>
                        <a href="#department">部门管理</a>
                        <a href="#department-add" class="addlink" title="添加部门"></a>
                    </li>
                </ul>
            </div>
            <div>
                <h2>用户管理</h2>
                <ul>
                    <li>
                        <a href="#user">用户</a>
                        <a href="#user-add" class="addlink" title="添加用户"></a>
                    </li>
                    <li>
                        <a href="#group">组</a>
                        <a href="#group-add" class="addlink" title="添加组"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main">
        <!-- 顶部导航栏 -->
        <div id="header">
            <div class="content-header">
                <h1 class="page-title">供应商管理</h1>
                <p class="subtitle">选择供应商来修改 · 共找到 <strong>15</strong> 个供应商</p>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 弹性布局容器 -->
            <div class="main-content-wrapper">
                <!-- 主内容区域 -->
                <div class="main-content-area">
                    <!-- 搜索栏 -->
                    <div class="search-container">
                        <div class="search-form">
                            <div class="search-input-group">
                                <input type="text" class="search-input" placeholder="请输入供应商名称或联系人...">
                                <i class="fas fa-search search-icon"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮栏 -->
                    <div style="display: flex; gap: 0.75rem; margin-bottom: 1.5rem;">
                        <button class="button btn-primary system-primary-bg">
                            <i class="fas fa-plus"></i>
                            添加供应商
                        </button>
                        <button class="button secondary">
                            <i class="fas fa-download"></i>
                            导出数据
                        </button>
                    </div>

                    <!-- 供应商列表表格 -->
                    <div class="results">
                        <table>
                            <thead>
                                <tr>
                                    <th>供应商名称</th>
                                    <th>联系人</th>
                                    <th>联系电话</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>北京科技有限公司</strong></td>
                                    <td>张经理</td>
                                    <td>13800138001</td>
                                    <td><span style="background: var(--success); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem;">活跃</span></td>
                                    <td><button class="button secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">编辑</button></td>
                                </tr>
                                <tr>
                                    <td><strong>上海智能设备公司</strong></td>
                                    <td>李主任</td>
                                    <td>13900139002</td>
                                    <td><span style="background: var(--success); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem;">活跃</span></td>
                                    <td><button class="button secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">编辑</button></td>
                                </tr>
                                <tr>
                                    <td><strong>广州办公用品商贸</strong></td>
                                    <td>王总监</td>
                                    <td>13700137003</td>
                                    <td><span style="background: var(--warning); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem;">暂停</span></td>
                                    <td><button class="button secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">编辑</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 右侧过滤器区域 -->
                <div class="sidebar-filters">
                    <h3 style="margin: 0 0 1rem 0; font-size: 1rem; font-weight: 600; color: var(--gray-800);">
                        <i class="fas fa-filter" style="margin-right: 0.5rem; color: var(--primary);"></i>
                        筛选器
                    </h3>
                    <div class="filter-section">
                        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                            <button class="filter-btn active" style="padding: 0.5rem 0.75rem; border: 1px solid var(--primary); background: var(--primary); color: var(--white); border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer;">
                                显示全部 (15)
                            </button>
                            <button class="filter-btn" style="padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer;">
                                状态活跃 (12)
                            </button>
                        </div>
                    </div>
                    <div style="margin-top: 1.5rem;">
                        <button class="quick-action-btn btn-primary system-primary-bg" style="width: 100%; padding: 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;">
                            <i class="fas fa-plus" style="margin-right: 0.5rem;"></i>
                            添加供应商
                        </button>
                    </div>
                </div>
            </div>

            <!-- 三个维度优化说明 -->
            <div style="margin-top: 3rem; padding: 2rem; background: white; border-radius: 1rem; border: 1px solid var(--gray-200);">
                <h2 style="margin: 0 0 1.5rem 0; font-size: 1.25rem; font-weight: 600; color: var(--gray-900);">
                    📊 三个维度优化效果演示
                </h2>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
                    <!-- 布局适配优化 -->
                    <div class="highlight-box">
                        <div class="highlight-content">
                            <div class="highlight-title">
                                <i class="fas fa-layout"></i>
                                一、布局适配优化
                            </div>
                            <ul style="margin: 0; padding-left: 1.25rem; color: var(--gray-600); line-height: 1.6;">
                                <li><strong>内容区自动缩进</strong>：主内容区根据菜单栏宽度自动调整</li>
                                <li><strong>弹性空间分配</strong>：左侧菜单、中间内容、右侧过滤器保持合理比例</li>
                                <li><strong>响应式调整</strong>：窗口缩放时元素比例自动适应</li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 交互体验优化 -->
                    <div class="highlight-box">
                        <div class="highlight-content">
                            <div class="highlight-title">
                                <i class="fas fa-mouse-pointer"></i>
                                二、交互体验优化
                            </div>
                            <ul style="margin: 0; padding-left: 1.25rem; color: var(--gray-600); line-height: 1.6;">
                                <li><strong>hover 反馈强化</strong>：悬停时显示向右箭头和平移动画</li>
                                <li><strong>快速收起/展开</strong>：顶部悬浮按钮 + 快捷键支持</li>
                                <li><strong>键盘快捷键</strong>：Alt+S 切换菜单栏状态</li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 视觉一致性优化 -->
                    <div class="highlight-box">
                        <div class="highlight-content">
                            <div class="highlight-title">
                                <i class="fas fa-palette"></i>
                                三、视觉一致性优化
                            </div>
                            <ul style="margin: 0; padding-left: 1.25rem; color: var(--gray-600); line-height: 1.6;">
                                <li><strong>色彩系统统一</strong>：菜单选中项、按钮统一使用主色调</li>
                                <li><strong>字体层级清晰</strong>：菜单、标题、正文使用不同字号和权重</li>
                                <li><strong>间距规范化</strong>：统一的设计token系统</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div style="margin-top: 2rem; padding: 1.5rem; background: var(--primary-50); border-radius: 0.75rem; border-left: 4px solid var(--primary);">
                    <h3 style="margin: 0 0 1rem 0; color: var(--primary-700);">🚀 测试说明</h3>
                    <p style="margin: 0; color: var(--gray-700);">
                        请点击左上角的菜单切换按钮或使用快捷键 <strong>Alt+S</strong> 来体验菜单栏的展开、收起功能。
                        注意观察主内容区如何自动调整宽度，以及右侧过滤器如何保持最佳的视觉布局。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入JavaScript -->
    <script src="static/js/minimal_theme.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('📊 布局优化演示页面已加载');
            
            // 监听主题加载完成
            document.addEventListener('minimalThemeLoaded', function(e) {
                console.log('🎉 主题优化加载完成');
                
                setTimeout(() => {
                    minimalTheme.showNotification(
                        '演示就绪',
                        '三个维度优化已全部加载，请尝试切换菜单栏状态！',
                        'success'
                    );
                }, 1500);
            });
            
            // 演示过滤器功能
            const filterBtns = document.querySelectorAll('.filter-btn');
            filterBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    filterBtns.forEach(b => {
                        b.style.background = 'var(--white)';
                        b.style.color = 'var(--gray-700)';
                        b.style.borderColor = 'var(--gray-300)';
                    });
                    btn.style.background = 'var(--primary)';
                    btn.style.color = 'var(--white)';
                    btn.style.borderColor = 'var(--primary)';
                    
                    minimalTheme.showNotification('筛选器', `已切换到 ${btn.textContent.trim()}`, 'info');
                });
            });
        });
    </script>
</body>
</html>